<template>
<div class="main">
  <div class="head">
    <div class="head-input">
      <el-input v-model="nameOrNumber" placeholder="输入姓名或者学号"></el-input>
    </div>
    <div class="head-button">
      <el-button type="primary" @click="toSelectStudentsByNameOrNumber">查询</el-button>
    </div>
  </div>
  <div class="body">
    <el-table v-if="tableData.length >= 0"
              :data="tableData"
              height="510"
              border
              highlight-current-row
              style="width: 90%;cursor: pointer"
    >
      <el-table-column prop="id" label="学生ID" />
      <el-table-column prop="userNumber" label="学生学号" />
      <el-table-column prop="username" label="学生姓名" />
      <el-table-column prop="email" label="学生邮箱"  />
      <el-table-column prop="phone" label="学生电话" >
      </el-table-column>
      <el-table-column prop="address" label="地址" >
      </el-table-column>
    </el-table>
  </div>
  <div class="foot">
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="paginations.page_index"
                   :page-sizes="paginations.page_sizes"
                   :page-size="paginations.page_size"
                   :layout="paginations.layout"
                   :total="paginations.total">
    </el-pagination>
  </div>
</div>
</template>

<script>
import {getAllStudents, selectStudentsByNameOrNumber} from "../../api/user";

export default {
  name: "StudentInformation",
  data(){
    return {
      nameOrNumber:'',
      paginations: {
        page_index: 1, //当前页面
        total: 0,      //总页数
        page_size: 5,  //每页显示的记录条数
        page_sizes: [5, 10, 15, 20],  //可选择的page_size范围
        layout: "total, sizes, prev, pager, next, jumper"  //翻页属性
      },
      tableData: [],
      allTableData: [],
    }
  },
  created() {
    this.AllStudents();
  },
  mounted() {

  },
  methods: {
    AllStudents(){
      getAllStudents().then(response =>{
        this.allTableData = response.data
        this.setPaginations();
      })
    },
    toSelectStudentsByNameOrNumber(){
      selectStudentsByNameOrNumber(this.nameOrNumber).then(response => {
        this.allTableData = response.data
        this.setPaginations();
      })
    },
    handleSizeChange(page_size) {
      this.paginations.page_index = 1;
      this.paginations.page_size = page_size;
      this.tableData = this.allTableData.filter((item, index) => {
        return index < page_size;
      });
    },
    handleCurrentChange(page) {
      this.paginations.page_index =page;
      let index = this.paginations.page_size * (page - 1);
      let nums = this.paginations.page_size * page;
      let tables = [];   // 存储跳转页面要显示的记录

      for (let i = index; i < nums; i++) {
        if (this.allTableData[i]) {
          tables.push(this.allTableData[i]);
        }
        this.tableData = tables;
      }
    },
    setPaginations() {
      this.paginations.total = this.allTableData.length;
      this.paginations.page_index = 1;
      this.paginations.page_size = 5;
      //设置默认的分页数据
      this.tableData = this.allTableData.filter((item, index) => {
        return index < this.paginations.page_size;
      });
    },
  }
}
</script>

<style scoped>
.main {
  display: flex;
  flex-direction: column;
}
.head {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.head-input {
  margin-right: 50px;
}
.body {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>